<template>
  <div class="brief-intro-container">
    <div class="brief-content-container">
      <div class="hello">HELLO</div>
      <div>我是<span class="name">廖耀华</span></div>
      <div>一个前端开发工程师</div>
      <div class="brief-desc">
        我享受解决问题的过程，每当通过代码实现一个复杂交互或者优化页面性能时，都会获得满满的成就感。业余时间，我喜欢探索新的前端技术，将它们运用到自己的小项目中，不断学习和成长，期望能用代码给大家带来更多惊喜。
      </div>
      <!-- <div class="contact-btn-container">
         <a-button type="primary" size="large">联系我吧</a-button>
         <a-button type="default" size="large">了解更多</a-button>
      </div> -->
    </div>
    <div class="avatar-container">
      <div class="avatar">
        <img :src="liaoyaohua3d" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
const liaoyaohua3d =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/liaoyaohua-3d.png";
</script>

<style lang="scss" scoped>
.brief-intro-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  width: 100%;
  height: 400px;
  background-color: #f8f9fa;

  .brief-content-container {
    display: flex;
    flex-direction: column;
    width: 800px;
    font-size: 28px;
    padding: 20px;
    color: #333;

    .hello {
      font-size: 20px;
      color: #666;
      font-family: "SourceHanSansCN-Heavy", sans-serif;
      margin-bottom: 10px;
    }

    .name {
      // color: #151929;
      color: #165dff;
      font-family: "SourceHanSansCN-Heavy", sans-serif;
      font-size: 48px;
      margin: 0 10px;
    }

    .brief-desc {
      font-size: 18px;
      margin-top: 20px;
      color: #666;
      line-height: 1.5;
    }

    .contact-btn-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 20px;
      margin-top: 40px;
    }

    .contact-btn:hover {
      opacity: 0.8;
    }
  }

  .avatar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    width: 300px;
    height: 300px;
    margin-left: 250px;
    margin-right: 100px;

    .avatar {
      height: 100%;
      filter: drop-shadow(0 0 100px #165cff3b);
      border-radius: 8px;
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        filter: drop-shadow(0 0 100px #165cff71);
        transform: scale(1.02);
      }
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
}

// 笔记本适配
@media screen and (max-width: 1280px) {
  .brief-intro-container {
    height: 250px;
    .brief-content-container {
      font-size: 20px;
      width: 700px;

      .hello {
        font-size: 16px;
      }

      .name {
        font-size: 36px;
      }

      .brief-desc {
        font-size: 14px;
      }
    }
      .avatar-container {
        width: 200px;
        height: 200px;
        margin-left: 0;
        margin-right: 0;
      }
  }
}
</style>
